<template>
  <div>
      <!-- 下拉刷新包着上拉加载 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="(item, index) in arr" :key="index">
          <p>{{ item.tit }}</p>
          <img :src="item.img" alt="" />
          <p>{{ item.word }}</p>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      count: 0,
    isLoading: false,
     loading: false,
     finished: false, // 用于记录上拉加载完成的变量
     count1:0 //用于记录上拉加载的次数
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    ...mapState(["arr"]),
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.getList();
        this.count++;
      }, 1000);
    },
    ...mapActions(["getList","addList"]),
     // 上拉加载
     onLoad() {
      setTimeout(() => {
          this.loading =  false,
         this.addList()
         console.log(this.arr)
      }, 1000);
      this.count1 ++;
      if (this.count1 >= 5) {
          this.finished = true
      }
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100vw;
  height: 100vh;
}
#app {
  width: 100%;
  height: 100%;
}
</style>